<template>
  <div class="tableModel2">
    <!-- @mouseover="foucus" @mouseout="blur" -->
    <el-carousel height="300px" motion-blur direction="vertical" :interval="3000 * (props.columns?.length ?? 3)"
      :autoplay="true" arrow="always" v-if="props.data.length">
      <el-carousel-item v-for="(item, i) in props.data" :key="i" :name="`${i}`">
        <el-row style="height: 98%;">
          <!--  align-content: flex-start; -->
          <el-col class="data-item" :span="props.columns?.length > 6 ? 6 : 8" v-for="(item2, t) in props.columns"
            :key="t">
            <div class="rowTit">{{ item2.title }}</div>
            <div class="rowCont">
              <span v-if="item2.key === 'num'">{{ i + 1 }}</span>
              <span v-else-if="item2.type === 'boolean'">
                {{ item[item2.key] === 0 ? "停止" : item[item2.key] === 1 ? "启动" : "--" }}
              </span>
              <span v-else-if="item2.type === 'warning'">
                {{ item[item2.key] === 0 ? "正常" : item[item2.key] === 1 ? "异常" : "--" }}
              </span>
              <span v-else>
                {{ item[item2.key] ?? "--" }}
              </span>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
/** @api */
interface Props {
  title?: string;
  columns: { title: string; key: string; type?: "boolean" | "warning" }[];
  data: { [key: string]: string | number }[];
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  title: "厂房",
  columns: () => [

  ],
  data: () => [],
});
/** @数据 */
/** 滚动定时器 */
// let scrollTimer1: number | any = 0;
// const scrollRef1 = ref<any>(null);
/** @生命周期 */
onMounted(() => {
  // beginScroll();
});
/** @方法 */
// const foucus = () => {
//   clearInterval(scrollTimer1);
// };
// const blur = () => {
//   scrollTimer1 = undefined;
//   loopScroll();
// };
// const beginScroll = () => {
//   setTimeout(() => {
//     loopScroll();
//   }, 500);
// };
// const loopScroll = () => {
//   scrollTimer1 = setInterval(() => {
//     changeScrollTop(scrollRef1.value);
//   }, 100);
// };
// const changeScrollTop = (dom: any) => {
//   // const dom = scrollRef.value?.wrapRef;
//   if (dom) {
//     // console.log('dom', dom.scrollHeight, dom.clientHeight)
//     /** 小于一行就不滚动 */
//     if (dom.scrollHeight - dom.clientHeight < 55) {
//       return;
//     }
//     dom.scrollTop = dom.scrollTop + 2;
//     const top = dom.scrollTop;
//     const sHeight = dom.scrollHeight;
//     const cHeight = dom.clientHeight;
//     if (top + cHeight + 50 >= sHeight) {
//       dom.scrollTop = 0;
//     }
//   }
// };
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.tableModel2 {
  width: 621px;
  height: 311px;
  box-sizing: border-box;
  padding: 20px;
  padding-bottom: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  // .tboodyBox {
  //   width: 100%;
  //   display: block;
  //   height: 100%;
  //   overflow-y: hidden;
  //   overflow-x: hidden;
  //   // background-color: lightblue;

  //   &::-webkit-scrollbar {
  //     width: 1px;
  //   }

  //   &::-webkit-scrollbar-thumb {
  //     width: 1px;
  //     border-radius: 10px;
  //     // background-color: #a8a8a8;
  //   }

  //   &::-webkit-scrollbar-track {}

  // }

  .data-item {
    .rowTit {
      // width: 570px;
      // height: 45px;
      // line-height: 20px;
      box-sizing: border-box;
      padding: 4px 0;
      font-size: 16px;
      background: rgba(0, 102, 176, 0.27);
    }

    .rowCont {
      box-sizing: border-box;
      padding: 4px 0;
      font-size: 14px;
      // height: 98px;
      // line-height: 98px;
      display: flex;
      flex-direction: column;
      height: calc(100% - 24px);
      justify-content: center;
    }
  }
}
</style>
